
<style>
    .dx_div{
        max-height: 500px;
        overflow: auto;
        display: flex;
        flex-direction: column;
    }
    .dx_cate_name{
        text-align: center;
        line-height: 24px;
        height: 24px;
        font-size: 16px;
        margin-top: 4px;
    }
    .dx_cate_content{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .dx_cate_content_item{
        width: 48%;
    }
</style>
<?php
    $guding = 0;
    $dx_product = [];
    $tmp_dx_product = $config['dx_product'];
    foreach($tmp_dx_product as  $v){
        if($v['status']==1){
            if($v['is_default']==1){
                $guding+=1;
           }
           array_push($dx_product,$v);
        }

    }
?>
<div class="altBox" >
    <span class="closeBtn" onclick="closescreen()"></span>
    <div class="altTit"> &#35831;选择{$config['shops']}（<span class="numBer">{$guding}</span>/{$config['shopsmax']}）</div>
    <div class="choseBox dx_div" >
        {loop $config['options'] $row}
        {if $row['status']==1}
        <div>
            <div class="dx_cate_name">{$row['name']}</div>
            <div class="dx_cate_content">
                {loop $row['list'] $row1}
                <?php  $item_can_show = \app\model\Common::getFormFIveAndLimitBuyCanShowByItemId($config,$themeid,$row1['id']);?>
                {if $row1['status']==1 && $item_can_show}
                <div class="dx_cate_content_item">
                    {if $row1['is_default']==1}
                    <li class="default_selected" data-cid="{$row1['c_id']}" data-pid="{$row1['id']}" style="width:100%;min-height: 40px;display: flex;align-items: center;box-sizing: border-box;justify-content: center;">{$row1['name']}(必选)</li>
                    {else}
                    <span class="selecte_span" data-cid="{$row1['c_id']}" data-cname="{$row['name']}" data-pid="{$row1['id']}" style="border:1px solid #e3e3e3;width:100%;min-height: 40px;display: flex;align-items: center;box-sizing: border-box;justify-content: center;">{$row1['name']}</span>
                    {/if}
                </div>
                {/if}
                {/loop}
            </div>

        </div>
        {/if}
        {/loop}
    </div>
    <i class="checkBtn" onclick="NextBtn()"> 下一步 </i> </div>

<script type="text/javascript">
    let dx_cate = '{$dx_cate_only_data}';
    dx_cate = JSON.parse(dx_cate);

    function NextBtn() {
        //获取分类
        for (let i = 0;i<dx_cate.length;i++){
            let tmp_cate_id = dx_cate[i].id;
            let tmp_cate_min = dx_cate[i].min;
            let tmp_cate_max = dx_cate[i].max;
            let tmp_cate_name = dx_cate[i].name;
            //判断分类下商品是否在合法范围内
            let selected_span_num = getSelectedItemByCid(tmp_cate_id);
            if (selected_span_num<tmp_cate_min){
                tips(tmp_cate_name+'最少选择'+tmp_cate_min+'项！');
                return;
            }
            if (selected_span_num>tmp_cate_max){
                tips(tmp_cate_name+'最多只能选择'+tmp_cate_max+'项！');
                return;
            }
        }

        var num = $('.altBox .choseBox .on').length+{$guding};
        if(num<{$config['shopsmin']}){
            tips('最少选择{$config['shopsmin']}项！');
            return;
        }else if(num>{$config['shopsmax']}){
            tips('最多选择{$config['shopsmax']}项！');
            return;
        }else{
            $('.altBox').animate({'bottom':'-300%'},500);
            $('#inforBox').animate({'bottom':0},500);
        }
    }
    //获取分类下选择的记录数
    function getSelectedItemByCid(cid) {
        let selected_span = 0;
        let on_span = $('.altBox .on');
        let default_selected = $('.default_selected');
        for (let j = 0; j< on_span.length;j++){
            if ($('.altBox .on').eq(j).data("cid")==cid){
                selected_span+=1;
            }
        }
        for (let k =0;k<default_selected.length;k++){
            if ($('.default_selected').eq(k).data("cid")==cid){
                selected_span+=1;
            }
        }
        return selected_span;
    }


    $('.altBox .selecte_span').click(function(){
        if($(this).hasClass('on')){
            // let tmp_cate_min = 0;
            // for (let i = 0;i<dx_cate.length;i++){
            //     if (dx_cate[i].id == cid){
            //         tmp_cate_max = dx_cate[i].max;
            //         tmp_cate_min = dx_cate[i].min;
            //     }
            // }
            // let selected_span = getSelectedItemByCid(cid);
            // if (selected_span<tmp_cate_min){
            //     tips(cname+'最少选择'+tmp_cate_min+'项！');
            //     return;
            // }
            $(this).removeClass('on');
            var nun2 = $('.altBox .on').length+{$guding};
            $('.numBer').html(nun2);
        }else{
            //获取当前点击分类可以商品数
            let cid = $(this).data("cid");
            let cname = $(this).data("cname");
            let tmp_cate_max = 0;
            for (let i = 0;i<dx_cate.length;i++){
                if (dx_cate[i].id == cid){
                    tmp_cate_max = dx_cate[i].max;
                }
            }
            let selected_span = getSelectedItemByCid(cid);
            if (selected_span >= tmp_cate_max){
                tips(cname+'最多只能选择'+tmp_cate_max+'项！');
                return;
            }
            var num = $('.altBox .on').length+1+{$guding};
            if(num>{$config['shopsmax']}){
                tips('最多只能选择{$config['shopsmax']}项！');
                return;;
            }
            $(this).addClass('on');
            var nun = $('.altBox .on').length+{$guding};
            $('.numBer').html(nun);
        }
    })
</script>